<template>
  <panel title=" ">
    <span slot="title-extra"></span>
    <div class="middle-area-districtLeft">
      <x-row class="text-content text-content-top">
        <div class="col-10  position">
          <img src="../../../../assets/images/house.png" alt="">
        </div>
        <div class="col-14">
          <x-col :span="item.span" v-for="(item, index) in info">
            <text-box
              title-place="bottom"
              :title="item.title"
              :value="item.value"
              :unit="item.unit"
              :type="item.type"
              :unit-font-size="index === 1 ? '13px' : ''"
              number-font-size="27px">
            </text-box>
          </x-col>
        </div>
      </x-row>
      <x-row class="text-content text-content-bottom">
        <div class="col-10 position">
          <img src="../../../../assets/images/city.png" alt="">
        </div>
        <div class="col-14">
          <x-col :span="item.span" v-for="(item, index) in info2">
            <text-box
              title-place="bottom"
              :title="item.title"
              :value="item.value"
              :unit="item.unit"
              :type="item.type"
              :unit-font-size="index === 1 ? '13px' : ''"
              number-font-size="27px">
            </text-box>
          </x-col>
        </div>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'districtLeft',
  computed: {
    pm25 () {
      if (!this.$store.getters.pm25) {
        return
      }
      let obj = {}
      let res = _.clone(this.$store.getters.pm25)
      // 做一个天气质量的对应关系
      let oj = {
        '1': '很好',
        '2': '好',
        '3': '中',
        '4': '差',
        '5': '很差'
      }
      let color = {
        '1': 'green',
        '2': 'blue',
        '3': 'orange',
        '4': 'danger',
        '5': 'brownRed'
      }
      obj['pm25'] = res.data['0']
      obj['temperature'] = res.data['3']
      for (let i in oj) {
        if (parseInt(i) === res.data['5']) {
          obj['airQuality'] = oj[i]
        }
      }
      for (let i in color) {
        if (parseInt(i) === res.data['5']) {
          obj['color'] = color[i]
        }
      }
      return obj
    },
    publicPm25 () {
      let publicPm25History = this.$store.getters.publicPm25History
      if (window.localStorage.getItem('pm')) {
        publicPm25History = window.localStorage.getItem('pm').split(',')
      }
      if (!publicPm25History) {
        return
      }
      let obj = {}
      let res = publicPm25History[publicPm25History.length - 1]
      // 做一个天气质量的对应关系
      obj['pm25'] = parseFloat(res)
      if (parseInt(res) > 0 && parseInt(res) < 35) {
        obj['airQuality'] = '很好'
        obj['color'] = 'green'
      }
      if (parseInt(res) < 70 && parseInt(res) > 35) {
        obj['airQuality'] = '好'
        obj['color'] = 'blue'
      }
      if (parseInt(res) < 100 && parseInt(res) > 70) {
        obj['airQuality'] = '中'
        obj['color'] = 'orange'
      }
      if (parseInt(res) < 150 && parseInt(res) > 100) {
        obj['airQuality'] = '差'
        obj['color'] = 'danger'
      }
      if (parseInt(res) < 200 && parseInt(res) > 150) {
        obj['airQuality'] = '很差'
        obj['color'] = 'brownRed'
      }
      return obj
    },
    info () {
      let res
      if (!this.pm25) {
        res = {
          airQuality: '好',
          pm25: 0,
          color: 'green'
        }
      } else {
        res = this.pm25
      }
      return [{
        title: '小区空气质量',
        unit: res.airQuality,
        span: 12,
        type: res.color
      }, {
        title: '小区PM2.5',
        value: res.pm25,
        unit: 'ug/m³',
        span: 12,
        type: 'green'
      }]
    },
    info2 () {
      let res
      if (!this.publicPm25) {
        res = {
          airQuality: '好',
          pm25: 0,
          color: 'blue'
        }
      } else {
        res = this.publicPm25
      }
      return [{
        title: '广州市空气质量',
        unit: res.airQuality,
        span: 12,
        type: res.color
      }, {
        title: '广州市PM2.5',
        value: res.pm25,
        unit: 'ug/m³',
        span: 12,
        type: 'green'
      }]
    }
  },
  mounted () {
    setTimeout(this.initialize, 400)
    // 获取空气质量检测仪数据
    this.requestRestfulData()
  },

  methods: {
    // initialize () {
    //   this.show = true
    // },
    requestRestfulData () {
      this.$store.dispatch('updatePM25')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'
.middle-area-districtLeft
  margin-top 3vmin
  font-size normal
  .position {
   padding-left: 50px;
   box-sizing: border-box;
  }
  .text-content-top
    padding-bottom: 3vmin;
    width inherit
    font-weight 100
    margin 0 20px
    border-bottom 1px dashed rgba(255,255,255,0.3)
  .text-content-bottom
    padding-top 6.3%
    width inherit
    font-weight 100
    margin 0 20px
</style>